<template>
   <button @click="CodeRun" class="codeRun-bt">Run</button>
   <div id="code-container" style=""></div>
   <div>
       <div style="display:flex;flex-direction: column; background-color: #1f2838;margin-top:4px;text-align: right; padding:.2em .5em;">
        
          <div>{{ Demo_Frontmatter?.name ?? 'Hello' }}</div>
          <div>{{ Demo_Frontmatter?.time ?? '' }}</div>
        
       </div>
       <Demo v-if="Demo"/>
   </div>

</template>

<script lang="ts" setup>
import { EditorState,Compartment} from "@codemirror/state";
import { EditorView, keymap } from "@codemirror/view";
import { markdown }   from "@codemirror/lang-markdown";
import { indentWithTab } from "@codemirror/commands";
import { oneDark } from "@codemirror/theme-one-dark";
import { basicSetup } from "codemirror";

import { compile } from "@mdx-js/mdx";
import remarkGfm from 'remark-gfm';
//import rehypeMdxCodeProps from "rehype-mdx-code-props"
import remarkFrontmatter from "remark-frontmatter"
import remarkMdxFrontmatter  from "remark-mdx-frontmatter"

import { h,Fragment } from "vue";
let _createVNode = h;
let _Fragment = Fragment;
let Demo:any = ref(false);
let Demo_Frontmatter = ref({});
let view:EditorView;


const languageConf = new Compartment();
const myTheme = EditorView.theme({ //自定义主题
    ".cm-scroller": {
       fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
       fontSize: "0.8rem"
    },
    ".cm-content": {color: "#dbe1e8",width:"450px",letterSpacing:"0.03rem"}, //默认文本颜色
    ".cm-line .ͼ11":{
        color: "#6cb6ff",
        fontWeight: "bold",
        fontSize: "0.9rem"
    },
    ".cm-line .ͼ13":{
        color: "#6cb6ff",
        fontWeight: "400",
        fontSize: "0.9rem"
    },
    ".cm-line .ͼu":{
        color: "#ec75b5",
    },
    ".cm-line .ͼv":{
        color: "#e2e7ef",
    },
    ".cm-line .ͼq":{
        color: "#e2e7ef",
    },
    "&": {
        textAlign: "left",
    },
    //光标的颜色
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "#FFFFFF",
    },
    "&.cm-editor":{
        maxHeight: "93vh",
        maxWidth:"500px",
        backgroundColor: "#1f2838",
        border:"1px solid #38404f"
    },
    "&.cm-editor .cm-gutters":{
        backgroundColor: "#1f2838"
    },
    "&.ͼo .cm-activeLineGutter":{
        backgroundColor: "#222227"
    },
    ".cm-gutterElement":{
        color: "#59687d"
    },
    "&.cm-editor.cm-focused":{
        outline: 'none'
    }
  
}, { dark: false })
let state = EditorState.create({
    extensions: [
      basicSetup,
      languageConf.of(markdown()),
      keymap.of([indentWithTab]),
      oneDark,
      myTheme
    ]
});


const  CodeRun = async ()=>{
    console.time('code');
    const newcode = view.state.doc.toString();
    if(!newcode.trim()) return Demo.value = false;

    let Code = String(await compile(newcode, {
        // remarkPlugins:[ remarkGfm ],
        remarkPlugins:[ remarkGfm,remarkFrontmatter,remarkMdxFrontmatter ],
        //rehypePlugins: [rehypeMdxCodeProps],
        jsxRuntime: 'classic',
        pragma: '_createVNode',
        pragmaFrag: "_Fragment",
        pragmaImportSource: 'vue'
    }))

   
    console.log(newcode)


    if(Code[Code.length-2] === ';'){
       Code = Code.slice(0,Code.length-27)
    }else{
       Code = Code.slice(0,Code.length-230) + `function _missingMdxReference(id, component) { let name = component ? "组件" : "对象";alert("未定义的"+name+":"+id);}`;
    }



    Code = Code.slice(100).replace(/\\n/g,'') + 'Demo.value = MDXContent; Demo_Frontmatter.value = frontmatter';


    console.log(Code);

    eval(Code);

    console.timeEnd('code');

}


const CodeKeyup = () =>{
      CodeRun();
}


onMounted(()=>{
    let container =  <HTMLDivElement>document.querySelector("#code-container");

    view = new EditorView({
      state,              //编辑器初始化状态
      parent: container,  //编辑器挂载dom
    });
  
    view.focus();  // view.hasFocus 检查编辑器是否有焦点
    view.contentDOM.addEventListener('keyup',CodeKeyup);

})


</script>




<style scoped>
.codeRun-bt{
   position: absolute;
   top:-30px;
   left: 0px;
   height: 25px;
   background-color:#1f2838;
   border:1px solid #38404f;
   border-radius: 0.3rem;
   outline: none;
   padding-left:0.5rem;
   padding-right: 0.5rem;
}
.codeRun-bt:hover{
    background-color: #222d41;
    cursor:pointer
}
.codeRun-bt:active{
   background-color:#131626;
}
</style>